<!DOCTYPE html>
<html lang="zh - CN" class="a11y - friendly">

<head>
    <meta charset="UTF - 8">
    <meta name="viewport" content="width=device - width, initial - scale = 1.0">
    <title>无障碍在线简历生成器</title>
    <link rel="stylesheet" href="vital.css">
    <style>
      
    </style>
</head>

<body>
    <div class="nav-box"> 
        <ul>
            <li>
                <div class="nav-block">
                    <a href="shouye.html"><i class="icon home"></i><span style="color: rgb(255, 255, 255)">系统首页</span></a>
                </div>
            </li>
           
           
            <li>
                <div class="nav-block on two">
                    <i class="icon order"></i><span>招聘信息</span>
                    <i class="arrow"></i>
                </div>
                <ul class="nav-two">
                    <a href="job.html" ><li><span style="color: white">工作岗位</span></li></a>
                    <a href="consequence.html"><li><span style="color: white">面试结果</span></li></a>
                </ul>
            </li>
            <li>
                <div class="nav-block on two">
                    <i class="icon order"></i><span>相关服务</span>
                    <i class="arrow"></i>
                </div>
                <ul class="nav-two">
                    <a href="explain.html"><li><span style="color: white">器械说明</span></li></a>
                    <a href="shopping.html"><li><span style="color: white">商城</span></li></a>
                </ul>
            </li> 
            <li>
                <div class="nav-block">
                    <a href="train.html"><i class="icon user"></i><span style="color: rgb(255, 255, 255)">技术培训</span></a>
                
                </div>
               
            </li>
            <li>
                <div class="nav-block on two">
                    <i class="icon order"></i><span>个人中心</span>
                    
                    <i class="arrow"></i>
                </div>
                <ul class="nav-two">
                    <a href="cjr.html"><li><span style="color: white">修改密码</span></li></a>
                    <a href="my.html"><li><span style="color: white">个人信息</span></li></a>
                    <a href="vital.html"><li><span style="color: white">个人简历</span></li></a>
                    
                </ul>
            </li>
           
        </ul>
    </div>
    <div>
        <div class="header"><h1>宝鸡市残疾人服务平台</h1></div>
        <div class="return">
            <a href="">退出登录</a>
        </div>
    </div>
    <div></div>
    <script>
        let nav=document.querySelector(".nav-box");
        nav.addEventListener("click",function(ev){
            if(ev.target.className.indexOf("two")>=0){
                ev.target.classList.toggle("on")
            }else if(ev.target.parentNode.className.indexOf("two")>=0){
                ev.target.parentNode.classList.toggle("on")
            }
        });
        </script>
    <div class="resume-builder">
        <div>
            <h2>🖋 基本信息</h2>
            <div>
                <div>
                    <label>姓名</label>
                    <input type="text" placeholder="张小明">
                </div>
                <div>
                    <label>性别</label>
                    <select >
                        <option value="male" selected="selected">男</option>
                        <option value="female">女</option>
                    </select>
                </div>
                <div>
                    <label>年龄</label>
                    <input type="text" placeholder="20">
                </div>
                <div>
                    <label>电子邮箱</label>
                    <input type="email"
                           placeholder="name@example.com"
                           pattern="^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$">
                </div>
                <div>
                    <label>手机号码</label>
                    <input type="tel"
                           placeholder="13800138000"
                           pattern="^1[3-9]\d{9}$"
                           maxlength="11">
                </div>
                </div>
                <div>
                    <label for="disability-type">残障类型</label>
                    <select id="disability-type">
                        <option value="肢体残疾" selected="selected">肢体残疾</option>
                        <option value="视力残疾">视力残疾</option>
                        <option value="听力残疾">听力残疾</option>
                        <option value="言语残疾">言语残疾</option>
                        <option value="智力残疾">智力残疾</option>
                        <option value="精神残疾">精神残疾</option>
                        <option value="其他类型">其他</option>
                    </select>
                </div>

                <div>
                    <label for="job-target">求职意向</label>
                    <input type="text" id="job-target" placeholder="请输入或选择推荐职位">
                </div>
            </div>
            <!-- 教育背景 -->
            <div>
                <label for="evaluation-background">教育背景</label>
                <textarea id="evaluation-background" rows="4" placeholder="请用简短的语言描述您的优势"></textarea>
            </div>
            <!-- 实习经历 -->
            <div>
                <h3>实习经历</h3>
                <div id="internship-container"></div>
                <button class="add-button" onclick="addInternship()">➕ 添加</button>
            </div>
            <!-- 在校经历 -->
            <div>
                <h3>在校经历</h3>
                <div id="campus-container"></div>
                <button class="add-button" onclick="addCampusExp()">➕ 添加</button>
            </div>
            <!-- 技能证书 -->
            <div>
                <label for="self-skill">技能证书</label>
                <textarea id="self-skill" rows="4" placeholder="请用简短的语言描述您的个人技能和所获得的证书"></textarea>
            </div>
            <!-- 自我评价 -->
            <div>
                <label for="self-evaluation">自我评价</label>
                <textarea id="self-evaluation" rows="4" placeholder="请用简短的语言描述您的优势"></textarea>
            </div>
        </div>
    <script>
        // 通用创建函数
        function createItemTemplate(fields) {
            return `
                <div class="experience-item">
                    ${fields.map(f => `
                        <input type="${f.type}" class="${f.class}" placeholder="${f.placeholder}" aria-label="${f.ariaLabel}">
                    `).join('')}
                    <textarea class="${f.textareaClass}" placeholder="${f.textareaPlaceholder}" aria-label="${f.textareaAria}"></textarea>
                </div>
            `;
        }

        // 实习经历模板
        function createInternshipItem() {
            return `
                <div class="experience-item">
                    <input type="month" class="intern-time" aria-label="实习时间">
                    <input type="text" class="intern-company" placeholder="公司名称">
                    <input type="text" class="intern-position" placeholder="担任职位">
                    <textarea class="intern-desc" placeholder="工作内容描述"></textarea>
                </div>
            `;
        }

        // 在校经历模板
        function createCampusExpItem() {
            return `
                <div class="campus-experience">
                    <input type="text" class="campus-role" placeholder="担任职务">
                    <input type="text" class="campus-org" placeholder="组织名称">
                    <textarea class="campus-desc" placeholder="经历描述"></textarea>
                    <input type="month" class="campus-duration" placeholder="持续时间">
                </div>
            `;
        }

     // 动态添加功能
     function addInternship() {
            const container = document.getElementById('internship-container');
            container.insertAdjacentHTML('beforeend', createInternshipItem());
            animateAddItem(container.lastElementChild);
        }

        function addCampusExp() {
            const container = document.getElementById('campus-container');
            container.insertAdjacentHTML('beforeend', createCampusExpItem());
            animateAddItem(container.lastElementChild);
        }

        // 增强数据绑定
        function updatePreview() {
            // 教育经历
            const educationItems = Array.from(document.querySelectorAll('.edu-item')).map(item => ({
                time: item.querySelector('.edu-time').value,
                school: item.querySelector('.edu-school').value,
                major: item.querySelector('.edu-major').value
            }));
            // 实习经历
            const internshipItems = Array.from(document.querySelectorAll('.experience-item')).map(item => ({
                time: item.querySelector('.intern-time').value,
                company: item.querySelector('.intern-company').value,
                position: item.querySelector('.intern-position').value,
                desc: item.querySelector('.intern-desc').value
            }));
            // 更新教育经历预览
            const educationPreviewContainer = document.getElementById('education-preview-container');
            educationPreviewContainer.innerHTML = '';
            educationItems.forEach((item, index) => {
                const timelineItem = document.createElement('div');
                timelineItem.classList.add('timeline - item');
                timelineItem.innerHTML = `
                    <input type="text" value="${item.time}" class="preview-edu-time">
                    <input type="text" value="${item.school}" class="preview-edu-school">
                    <input type="text" value="${item.major}" class="preview-edu-major">
                `;
                educationPreviewContainer.appendChild(timelineItem);
            });
            // 更新实习经历预览
            const internshipPreviewContainer = document.getElementById('internship-preview-container');
            internshipPreviewContainer.innerHTML = '';
            internshipItems.forEach((item, index) => {
                const timelineItem = document.createElement('div');
                timelineItem.classList.add('timeline-item');
                timelineItem.innerHTML = `
                    <input type="text" value="${item.time}" class="preview-intern-time">
                    <input type="text" value="${item.company}" class="preview-intern-company">
                    <input type="text" value="${item.position}" class="preview-intern-position">
                    <textarea class="preview-intern-desc">${item.desc}</textarea>
                `;
                internshipPreviewContainer.appendChild(timelineItem);
            });
        }

        // 初始化事件监听
        document.querySelectorAll('input, select, textarea').forEach(el => {
            el.addEventListener('input', updatePreview);
        });
    </script>
</body>

</html>
